<template>
  <div class="page-container">
    <div class="table-container">
      <CommonTable
        :tableConfigs="tableConfigs"
        @handleGetParams="handleGetParams"
      >
        <!-- 状态 -->
        <template #status="scope">
          <el-tag v-if="scope.row.status == 0" type="info">失败</el-tag>
          <el-tag v-if="scope.row.status == 1" type="">成功</el-tag>
        </template>
        <!-- 操作 -->
        <template #action="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleDetails(scope.$index, scope.row)"
            >查看详情</el-button
          >
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </CommonTable>
    </div>
  </div>
</template>

<script lang='ts' setup>
import CommonTable from "@/components/CommonTable";
import { menuData, columns } from "./data";

// 列表组件 配置
const tableConfigs = {
  title: "列表标题",
  total: 100,
  data: menuData,
  columns: columns,
};

// 分页功能
const handleGetParams = (res: any) => {
  console.log('龙慧芹 大傻逼！！！！！！');
  
  console.log("pageSize", res.pageSize.value);
  console.log("currentPage", res.currentPage.value);
};

// 查看
const handleDetails = (index: any, row: Object) => {
  console.log("查看");
  console.log(index, row);
};
// 编辑
const handleEdit = (index: any, row: Object) => {
  console.log("编辑");
  console.log(index, row);
};
// 删除
const handleDelete = (index: any, row: Object) => {
  console.log("删除");
  console.log(index, row);
};
</script>

<style lang="scss" scoped>
.table-container {
  height: 340px;
}
</style>